<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DBMX</title>
    <link rel="stylesheet" href="css/webix.css">
    <script src="js/webix.js"></script>
    <script src="js/main.js"></script>
    <script src="js/tool.js"></script>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #layout {
            width: 100%;
            height: 100%;
            border: 2px solid #333;
            /* 添加外边框 */
            box-sizing: border-box;
        }
        /* 子表格缩进样式 */
        .subtable {
            margin-left: 30px;
            border-left: 2px solid #ddd;
        }

        /* 操作列图标样式 */
        .webix_icon.wxi-plus, .webix_icon.wxi-minus {
            cursor: pointer;
            color: #1CA1C1;
        }
    </style>
</head>

<body>
    <div id="layout"></div>

    <script>
        webix.ready(function () {
            // 定义菜单栏数据
            const menuItems = [
                { id: "dashboard", value: "数据库表" },
                { id: "users", value: "查询" },
                { id: "settings", value: "系统设置" }
            ];

            // 定义左侧表格数据
            const leftTableData = [
                { id: 1, name: "interact", age: 25, email: "zhangsan@example.com" },
            ];

            // 定义右侧表格数据
            var tableData = [
                { id: 1, title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: 1925 },
                { id: 2, title: "1984", author: "George Orwell", year: 1949 },
                { id: 3, title: "Brave New World", author: "Aldous Huxley", year: 1932 }
            ];

            // 创建布局
            webix.ui({
                container: "layout",
                rows: [
                    // 菜单栏
                    {
                        view: "toolbar",
                        padding: 10,
                        elements: menuItems.map(item => ({
                            view: "button",
                            value: item.value,
                            click: function () {
                                webix.alert("点击了: " + item.value);
                            }
                        }))
                    },
                    // 主界面 - 水平布局
                    {
                        view: "layout",
                        cols: [
                            {
                                id: "dbList",
                                view: "accordion",
                                multi: true,
                                width: 300,
                                rows: [
                                    {
                                        header: "metameeting_interact",
                                        body: {
                                            view: "datatable",
                                            id: "table_0",
                                            header: false, // 关键配置
                                            columns: [
                                                { id: "name", header: "名称", fillspace: true },
                                            ],
                                            data: [],
                                            autoheight: false,
                                            scroll: true,
                                            on: {
                                                "onItemClick": function (id, e, trg) {
                                                    var selectedRow = this.getItem(id);
                                                    webix.message("点击了行: " + id.row + ", 列: " + id.column + ", value:" + selectedRow['name']);

                                                    if (!isLocalHtml()) {
                                                        webix.ajax()
                                                            .get("/api/getColumns", {table: selectedRow['name']}) // 获取某个表的表头
                                                            .then(function (response) {
                                                                // 处理响应数据
                                                                var data = response.json(); // 将响应解析为 JSON 格式
                                                               // data.data是查询的列名, 如何把列名写入到table中

                                                               var table = $$("mainTable");
                                                                // 清空原始列
                                                                table.config.columns = [];
                                                                for (var i = 0; i < data.data.length - 1; i++) {
                                                                    table.config.columns.push({ id: `col${i}`, header: data.data[i], width: 10 * data.data[i].length })
                                                                }
                                                                // 添加最后一列
                                                                var lastCol = data.data.length - 1
                                                                table.config.columns.push({ id: `col${lastCol}`, header: data.data[lastCol], fillspace: true })
                                                                // 刷新表格
                                                                table.refreshColumns();
                                                            })
                                                            .catch(function (error) {
                                                                // 处理请求错误
                                                                console.error("请求失败:", error);
                                                                webix.alert("请求失败: " + error);
                                                            });
                                                    }
                                                }
                                            },
                                        }
                                    },
                                    ///*
                                    {
                                        header: "操作记录",
                                        body: {
                                            view: "list",
                                            template: "#date# #action#",
                                            data: [
                                                { id: 1, date: "2024-03-01", action: "创建订单" },
                                                { id: 2, date: "2024-03-02", action: "修改配置" }
                                            ],
                                            autoheight: false,
                                            scroll: true
                                        }
                                    },
                                    //*/
                                ]
                            },

                            // 右侧表格
                            {
                                view: "datatable",
                                id: "mainTable",
                                scroll: "x", // 启用横向滚动条
                                //autowidth: true,
                                editable: true,  // 启用表格编辑
                                editaction: "click", // 单击单元格开始编辑
                                columns: [
                                    { id: "id", header: "ID", width: 100, editor: "text" },
                                    { id: "title", header: "Book Title", editor: "text" }, // 文本编辑器
                                    { id: "author", header: "Author", width: 200, editor: "text" },
                                    { id: "year", header: "Year", width: 80, editor: "text", validate: webix.rules.isNumber, fillspace: true } // 验证数字输入
                                ],

                                data: tableData,

                                rules: {
                                    year: function (value) {
                                        return value > 1900 && value < 2024; // 自定义验证规则
                                    }
                                },

                                on: {
                                    onAfterEditStop: function (state, editor, ignoreUpdate) {
                                        if (!state.value && state.old) {
                                            this.refreshEditor(); // 保留原始值如果新值无效
                                        }
                                    }
                                }
                            }
                        ]
                    }
                ]
            });


            // 获取 Accordion 对象
            var accordion = $$("dbList");

            // 监听 Accordion 的折叠事件
            accordion.attachEvent("onAfterExpand", function(id){
                var regex = /accordionitem(\d+)$/  // $accordionitem2
                var index = regex.exec(id)[1]
                if (index != 1) return

                var tableId = `table_${index - 1}`;
                var table = $$(tableId);

                // 插入数据到 DataTable
                if (table && isLocalHtml()) {
                    table.parse([
                        { id:1, name:"John", age:25 },
                        { id:2, name:"Anna", age:30 },
                        { id:3, name:"Peter", age:35 }
                    ]);

                    table.show();
                }

                if (table && !isLocalHtml()) {
                    webix.ajax()
                        .get("/api/getTables", {param1: "value1", param2: "value2"}) // 替换为你的服务端 URL 和参数
                        .then(function (response) {
                            // 处理响应数据
                            var data = response.json(); // 将响应解析为 JSON 格式
                            console.log(id, data);
                            var tableList = data.data
                            var nameList = tableList.map(name => {return {"name": name}})
                            table.parse(nameList);
                            table.show();
                            
                        })
                        .catch(function (error) {
                            // 处理请求错误
                            console.error("请求失败:", error);
                            webix.alert("请求失败: " + error);
                        });
                }
            });
        });
    </script>
</body>

</html>